<template>
  <master :title="dbn + ' 数据库详情'">
    <div class="searchForm">
      <div class="searchFormInputs" style="flex:1;">
        <el-input
          class="searchFormInput"
            v-model="sql"
            type="textarea"
            placeholder="查询语句"
          ></el-input>
      </div>
      <div class="searchFormBtn">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchList"
          >查询</el-button>
        <el-button
          type="warning"
          @click="add"
          >新增表</el-button>
        <el-button
          type="danger"
          @click="$back"
          >返回</el-button
        >
      </div>
    </div>
    <el-table :data="rows" stripe style="width: 100%">
      <el-table-column v-for="col in cols" :prop="col" :label="col">
      </el-table-column>
      <el-table-column fixed="right" width="300" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editCols(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="massage"
            size="mini"
            @click="goData(scope.row)"
            >数据</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="delet(scope.row)"
            >删除</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="truncate(scope.row)"
            >清空</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'请谨慎操作'" :visible.sync="visible">
      <el-form ref="editForm">
        <el-form-item label="执行语句">
          <el-input
            type="textarea"
            v-model="editSql"
            rows="8"
            placeholder="请输入执行SQL"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button
            type="primary"
            @click="visible = false"
            >取消</el-button
          >
          <el-button
            type="danger"
            @click="save"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </master>
  </template>
  <script type="text/javascript">
  (function (G) {
    G.vue({
    "usingComponents": {
      "master": "/components/Master/Master",
      "listpage": "/components/List/Page/Page"
    },
    "enablePullDownRefresh": true
  },{
      data: {
        sql:'',
        rows:[],
        cols:[],
        dbn:'',
        editSql:'',
        visible:false
      },
      methods: {
        editCols(item){
          G.$go(`/pages/data/cols?id=${this.id}&dbn=${this.dbn}&name=${item[`Tables_in_${this.dbn}`]}`)
        },
        goData(item){
          G.$go(`/pages/data/rows?id=${this.id}&dbn=${this.dbn}&name=${item[`Tables_in_${this.dbn}`]}`)
        },
        async searchList(){
          let tables = await G.post('/v1/datasource/test',{ id:this.id,content:this.sql },null,{ loading:true,timeout:10 * 60 * 1000 })
          this.cols = []
          for(let key in tables[0]) this.cols.push(key)
          this.rows = tables
        },
        async save(){
          let res = await G.post('/v1/datasource/test',{ id:this.id,content:this.editSql },null,{ loading:true,timeout:10 * 60 * 1000 })
          this.visible = false
          if(!res.errorMsg) {
            G.toask('操作成功')
            await this.searchList()
          }
        },
        async delet(item){
          this.editSql = `DROP TABLE ${ item[`Tables_in_${this.dbn}`] };`
          this.visible = true
        },
        truncate(item){
          this.editSql = `TRUNCATE TABLE ${ item[`Tables_in_${this.dbn}`] };`
          this.visible = true
        },
        async edit(item){
          let cols = []
          for(let key in item) {
            if(key == this.pri) continue
            if(typeof item[key] == 'number') {
              cols.push(`${ key }=${ item[key] }`)
            }else if(item[key]){
              cols.push(`${ key }='${ item[key] }'`)
            }
          }
          this.editSql = `UPDATE ${ this.name } SET\n${ cols.join(',\n') }\nWHERE ${ this.pri }='${ item[this.pri] }';`
          this.visible = true
        },
        add(){
          this.editSql = `CREATE TABLE youtTable (
          id BIGINT NOT NULL,
          PRIMARY KEY (id),
          UNIQUE INDEX id_UNIQUE (id ASC) VISIBLE);
          `
          this.visible = true
        }
      },
      async mounted(query) {
        this.dbn = query.dbn
        this.id = query.id
        // this.sql = `SELECT TABLE_COMMENT,TABLE_NAME,TABLE_ROWS,CREATE_TIME FROM information_schema.TABLES WHERE TABLE_SCHEMA = '${ this.dbn }';`
        this.sql = `SHOW TABLES;`
        await this.searchList()
      }
    });
  })(Y)
  </script>
  <style scoped>
  
  </style>